From a9addf14b78262726d2aec7632b786c2c7366fdb Mon Sep 17 00:00:00 2001 From: Lapo Calamandrei Date: Wed, 15 Apr 2015 21:43:59 +0200 Subject: [PATCH] Adwaita: colorpicker and colorbutton fixes. With nasty gross ugly code, no other ways, sorry. --- gtk/theme/Adwaita/_common.scss | 18 ++++++++++-------- gtk/theme/Adwaita/gtk-contained-dark.css | 13 +++++-------- gtk/theme/Adwaita/gtk-contained.css | 13 +++++-------- 3 files changed, 20 insertions(+), 24 deletions(-) diff --git a/gtk/theme/Adwaita/_common.scss b/gtk/theme/Adwaita/_common.scss index dc3e178535..da11e78ae6 100644 --- a/gtk/theme/Adwaita/_common.scss +++ b/gtk/theme/Adwaita/_common.scss @@ -812,9 +812,11 @@ $_dot_color: if($variant=='light', $selected_bg_color, } } + GtkColorButton.button { padding: 5px; // Uniform padding on the GtkColorButton - GtkColorSwatch { + + GtkColorSwatch:only-child:first-child:last-child { //*-child mess needed since we get overridden by the colorpicker selectors border-radius: 0; box-shadow: inset 0 1px 1px transparentize(black, 0.9), _widget_edge(); @@ -3086,7 +3088,7 @@ GtkInfoBar { GtkColorSwatch { // This widget is made of two boxes one on top of the other, the lower box is GtkColorSwatch {} the other one - // is GtkColorSwatch .overlay {}, GtkColorSwatch has the programmatically set background, so most of the style + // is GtkColorSwatch > .overlay {}, GtkColorSwatch has the programmatically set background, so most of the style // is applied to the overlay box. $_colorswatch_shadow: inset 0 1px transparentize(black, 0.9), _widget_edge(); @@ -3113,18 +3115,18 @@ GtkColorSwatch { border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; } - &.left, &:first-child, &:first-child .overlay { + &.left, &:first-child:not(.overlay), &:first-child:not(.top) > .overlay { border-top-left-radius: 5px; border-bottom-left-radius: 5px; } - &.right, &:last-child, &:last-child .overlay { + &.right, &:last-child:not(.overlay), &:last-child:not(.bottom) > .overlay { border-top-right-radius: 5px; border-bottom-right-radius: 5px; } - &:only-child, &:only-child .overlay { - border-radius: 5px; - } - // nth-child works just on the custom colors row + &:only-child:not(.overlay), &:only-child > .overlay { border-radius: 5px; } + // nth-child is used for the custom colors row. + // the :not() madness is needed since actually the overlay is selectable by GtkColorSwatch > .overlay + // and GtkColorSwatch.overlay, I know it's weird, but this is gtk+. // hover effect &:hover, diff --git a/gtk/theme/Adwaita/gtk-contained-dark.css b/gtk/theme/Adwaita/gtk-contained-dark.css index fc4b62f492..4befff93ee 100644 --- a/gtk/theme/Adwaita/gtk-contained-dark.css +++ b/gtk/theme/Adwaita/gtk-contained-dark.css @@ -1316,13 +1316,10 @@ GtkComboBox.combobox-entry .titlebar .button.titlebutton, GtkColorButton.button, .header-bar GtkColorButton.button.titlebutton, .titlebar GtkColorButton.button.titlebutton { padding: 5px; } - GtkColorButton.button GtkColorSwatch, .header-bar GtkColorButton.button.titlebutton GtkColorSwatch, - .titlebar GtkColorButton.button.titlebutton GtkColorSwatch { + GtkColorButton.button GtkColorSwatch:only-child:first-child:last-child { border-radius: 0; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1), 0 1px rgba(238, 238, 236, 0.1); } - GtkColorButton.button GtkColorSwatch:insensitive, .header-bar GtkColorButton.button.titlebutton GtkColorSwatch:insensitive, - .titlebar GtkColorButton.button.titlebutton GtkColorSwatch:insensitive, GtkColorButton.button GtkColorSwatch:backdrop, .header-bar GtkColorButton.button.titlebutton GtkColorSwatch:backdrop, - .titlebar GtkColorButton.button.titlebutton GtkColorSwatch:backdrop { + GtkColorButton.button GtkColorSwatch:only-child:first-child:last-child:insensitive, GtkColorButton.button GtkColorSwatch:only-child:first-child:last-child:backdrop { box-shadow: none; } /********* @@ -4246,13 +4243,13 @@ GtkColorSwatch { GtkColorSwatch.bottom { border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; } - GtkColorSwatch.left, GtkColorSwatch:first-child, GtkColorSwatch:first-child .overlay { + GtkColorSwatch.left, GtkColorSwatch:first-child:not(.overlay), GtkColorSwatch:first-child:not(.top) > .overlay { border-top-left-radius: 5px; border-bottom-left-radius: 5px; } - GtkColorSwatch.right, GtkColorSwatch:last-child, GtkColorSwatch:last-child .overlay { + GtkColorSwatch.right, GtkColorSwatch:last-child:not(.overlay), GtkColorSwatch:last-child:not(.bottom) > .overlay { border-top-right-radius: 5px; border-bottom-right-radius: 5px; } - GtkColorSwatch:only-child, GtkColorSwatch:only-child .overlay { + GtkColorSwatch:only-child:not(.overlay), GtkColorSwatch:only-child > .overlay { border-radius: 5px; } GtkColorSwatch:hover, GtkColorSwatch:hover:selected { background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 50%); diff --git a/gtk/theme/Adwaita/gtk-contained.css b/gtk/theme/Adwaita/gtk-contained.css index af6856c2db..100ade1f39 100644 --- a/gtk/theme/Adwaita/gtk-contained.css +++ b/gtk/theme/Adwaita/gtk-contained.css @@ -1316,13 +1316,10 @@ GtkComboBox.combobox-entry .titlebar .button.titlebutton, GtkColorButton.button, .header-bar GtkColorButton.button.titlebutton, .titlebar GtkColorButton.button.titlebutton { padding: 5px; } - GtkColorButton.button GtkColorSwatch, .header-bar GtkColorButton.button.titlebutton GtkColorSwatch, - .titlebar GtkColorButton.button.titlebutton GtkColorSwatch { + GtkColorButton.button GtkColorSwatch:only-child:first-child:last-child { border-radius: 0; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1), 0 1px white; } - GtkColorButton.button GtkColorSwatch:insensitive, .header-bar GtkColorButton.button.titlebutton GtkColorSwatch:insensitive, - .titlebar GtkColorButton.button.titlebutton GtkColorSwatch:insensitive, GtkColorButton.button GtkColorSwatch:backdrop, .header-bar GtkColorButton.button.titlebutton GtkColorSwatch:backdrop, - .titlebar GtkColorButton.button.titlebutton GtkColorSwatch:backdrop { + GtkColorButton.button GtkColorSwatch:only-child:first-child:last-child:insensitive, GtkColorButton.button GtkColorSwatch:only-child:first-child:last-child:backdrop { box-shadow: none; } /********* @@ -4418,13 +4415,13 @@ GtkColorSwatch { GtkColorSwatch.bottom { border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; } - GtkColorSwatch.left, GtkColorSwatch:first-child, GtkColorSwatch:first-child .overlay { + GtkColorSwatch.left, GtkColorSwatch:first-child:not(.overlay), GtkColorSwatch:first-child:not(.top) > .overlay { border-top-left-radius: 5px; border-bottom-left-radius: 5px; } - GtkColorSwatch.right, GtkColorSwatch:last-child, GtkColorSwatch:last-child .overlay { + GtkColorSwatch.right, GtkColorSwatch:last-child:not(.overlay), GtkColorSwatch:last-child:not(.bottom) > .overlay { border-top-right-radius: 5px; border-bottom-right-radius: 5px; } - GtkColorSwatch:only-child, GtkColorSwatch:only-child .overlay { + GtkColorSwatch:only-child:not(.overlay), GtkColorSwatch:only-child > .overlay { border-radius: 5px; } GtkColorSwatch:hover, GtkColorSwatch:hover:selected { background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 50%); -- 2.30.2